<template>
    <div class="tab-title-page goods_list">
      <div class="common_form_search">
        <el-form ref="searchForm" :inline="true" :model="searchForm">
          <el-form-item label="手机号">
            <el-input v-model="searchForm.mobile" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item label="工单状态">
            <el-select v-model="searchForm.is_complete" placeholder="全部" clearable>
              <el-option label="未处理" value="1" />
              <el-option label="已处理" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search()">查询</el-button>
            <el-button size="small" @click="reset()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-divider class="middle_divider" />
      <div class="child_page">
        <div class="flex align-center table-top-btns">
          <h5 class="flex align-center">
            <svg-icon style="margin-right: 15px" icon-class="list" :size="15" />数据列表
          </h5>
        </div>
        <el-table v-show="tableData.length > -1" :data="tableData" border>
          <el-table-column fixed="left" align="center" prop="id" label="ID" width="60" />
          <el-table-column align="center" prop="phoneNo" label="电话号码" width="150" />
          <el-table-column align="center" prop="status" label="状态" width="120" />
          <el-table-column align="center" prop="tradeAmount" label="交易金额，单位元" width="150" />
          <el-table-column align="center" prop="is_complete" label="投诉类别" width="110">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.is_complete" :type=" scope.row.is_complete == 2 ? 'success' :'danger' ">
              {{ scope.row.is_complete == 1 ? "未处理":"已处理" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="complainReason" label="用户投诉原因" />
          <el-table-column align="center" prop="gmtCreate" label="投诉单创建时间" />
          <el-table-column label="操作" align="center" width="110">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="check(scope.row.id)">查看</el-button>
            </template>
        </el-table-column>
        </el-table>
        <custom-page ref="customPage" :total="total" @getList="getList" />
      </div>
      <dispose ref="disposes" :suggest-id="suggestId" />
      <note-records ref="records" :suggest-id="suggestId" />
    </div>
  </template>
  
  <script>
  import { getSuggestType, complainList } from '@/api/complaint'
  import customPage from '@/components/customPage'
  import myDatePicker from '@/components/myDatePicker'
  import dispose from './dailog/dispose'
  import noteRecords from './dailog/noteRecords'
  export default {
    components: { customPage, myDatePicker, noteRecords, dispose },
    data() {
      return {
        searchForm: {
          mobile:'',
          is_complete:''
        },
        suggestId: '',
        total: 0,
        tableData: []
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      check(id) {
        this.suggestId = id
        this.$router.push({ name: 'complaintAntsDetails', params: { id }})
      },
      intervene(id) {
        this.suggestId = id
        this.$refs.disposes.dialogVisible = true
      },
      remark(id) {
        this.suggestId = id
        this.$refs.records.dialogVisible = true
      },
      // 获取数据
      getList(flag) {
        // flag为true, 则不刷新表格
        const { page, pageSize } = this.$refs.customPage
        if (!flag) {
          this.tableData = []
        }
        complainList({
          page,
          pageSize,
          ...this.searchForm,
        }).then((res) => {
          this.tableData = res.data || []
          this.total = res.total
        })
      },
      // 查询
      search() {
        this.$refs.customPage.page = 1
        this.getList()
      },
      // 重置
      reset() {
        this.searchForm = {
          mobile:'',
          is_complete:''
        }
        this.getList()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .el-button--warning.is-plain {
    color: #ff9f38;
    background: #fff;
    border-color: #ff9f38;
  }
  .el-icon-upload2 {
    font-size: 18px;
  }
  .dialog {
    text-align: center;
  }
  .goods_info {
    .info {
      margin-left: 10px;
      p {
        color: #666666;
      }
      p:first-child {
        color: #999999;
      }
    }
  }
  .activity {
    line-height: 24px;
  
    span {
      width: 20px;
      height: 20px;
      margin-left: 10px;
    }
  }
  .child_page {
    padding: 30px;
  }
  .common_form_search {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
  }
  .before {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #2993ff;
    border-radius: 50%;
  }
  .primary {
    background: #2993ff;
  }
  .warning {
    background: #ff9f38;
  }
  .danger {
    background: #ff4146;
  }
  </style>
  